<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单栏</title>

    <style>
        .menu {
            display: none;
        }

        .menu li {
            float: left;
            list-style: none;
            cursor: pointer;
            padding: 10px 20px;
        }

        .menu li:hover {
            background: #ddd;
        }

        .menuButton {
            padding: 8px 16px;
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }

        .menuButton:hover {
            background: #45a049;
        }
    </style>

</head>

<body>
    <button class="menuButton">显示菜单</button>
    <ul class="menu">
    </ul>
</body>
<script>
    let items = ["食品", "运动", "服饰", "书籍", "医药"];
    let menuButton = document.querySelector('.menuButton');
    let menu = document.querySelector('.menu');

    menuButton.addEventListener('click', function () {
        let str = '';
        for (let index in items) {
            str += `<li>${items[index]}</li>`;
        }
        menu.innerHTML = str;
        menu.style.display = 'block';
    });
</script>

</html>